<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		html{
			background-color:black ;
		}
		div{
			width:450px;
			margin: 0 auto;
			padding-top: 100px;
			color: white;
			font-size: 40px;
			font-family: courier;
			
		}
		div ul{
			clear: both;
			text-align: center;
		}
		div ul li {
			float: left;
			padding-left: 20px;
			list-style: none;
			
		}
		
		.my_animation{
			animation-name: sum_L;			
			animation-iteration-count: infinite;
			animation-timing-function: linear;	
			animation-duration: 1.6s;	
			
		}
		div ul li:nth-of-type(1){}
		div ul li:nth-of-type(2){animation-delay: .2s;}
		div ul li:nth-of-type(3){animation-delay: .4s;}
		div ul li:nth-of-type(4){animation-delay: .6s;}
		div ul li:nth-of-type(5){animation-delay: 0.8s;}
		div ul li:nth-of-type(6){animation-delay: 1s;}
		div ul li:nth-of-type(7){animation-delay: 1.2s;}
		@keyframes sum_L{
			0%{
				transform: translateY(0px);
			}
			20%{
				transform: translateY(15px);
			}
			40%{
				transform: translateY(0px);
			}
			50%{
				transform: translateY(0px);
			}
			75%{
				transform: translateY(0px);
			}
			100%{
				transform: translateY(0px);
			}
		}
	</style>
	<body>
		<div>
			<ul>
				<li class="my_animation">L</li>
				<li class="my_animation">O</li>
				<li class="my_animation">A</li>
				<li class="my_animation">D</li>
				<li class="my_animation">I</li>
				<li class="my_animation">N</li>
				<li class="my_animation">G.</li>
			</ul>
		</div>
		<p><a href="LINK.html">next</a></p>
	</body>
</html>
